/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-03 19:59:14
 * @LastEditTime: 2021-03-10 13:32:28
 * @LastEditors: Zhang Zhaoda
 */
import loginCss from "./login.less"
import { FC, useEffect } from "react";
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useDispatch, useSelector, UserModelState, useLocation, useHistory } from 'umi';
import React from 'react';

const Login: FC = () => {
    const dispatch = useDispatch();
    const onFinish = (values: any) => {
        console.log(values);

        dispatch({
            type: 'login/Login',
            payload: {
                user_name: values.username,
                user_pwd: values.password
            }
        })
    };
    let { isLogin } = useSelector((model: { login: UserModelState }) => model.login)
    let { query: { redirect } }: any = useLocation();

    const history = useHistory();

    useEffect(() => {
        if (isLogin) {
            redirect = redirect ? redirect : '/';
            history.replace(redirect)
        }
    }, [isLogin])

    return (
        <div className={loginCss.login}>
            <div className={loginCss.middle}>
                <div className={loginCss.from}>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>Remember me</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                Forgot password
                </a>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                </Button>
                Or <a href="">重置</a>
                        </Form.Item>
                    </Form>
                </div>
            </div>

        </div>
    );
}

export default Login